<template>
  <div class="container">
    <el-form :inline="true">
      <el-form-item label="入住人姓名:">
        <el-input
          v-model="item.cusName"
          placeholder="请输入入住人姓名"
          @input="change()"
        ></el-input>
      </el-form-item>
      <el-form-item label="备注:">
        <el-input
          v-model="item.remark"
          placeholder="请输入备注信息"
          @input="change()"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="身份证号:">
        <el-input
          v-model="item.cusIdcard"
          placeholder="请输入身份证号码"
          @input="change()"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="电话号码:">
        <el-input
          v-model="item.cusTel"
          placeholder="请输入电话号码"
          @input="change()"
        >
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="danger"
          v-if="index != 0"
          @click="deleteCustomerInfo"
          plain
          >移除</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "CustomerInfoView",
  props: ["index", "item"],
  methods: {
    deleteCustomerInfo() {
      this.$emit("deleteIndex", this.index);
    },
    change() {
      this.$forceUpdate();
    }
  }
};
</script>
<style>
div.container {
  padding: 20px;
  margin: 20px;
  height: 100px;
}
div:hover {
  cursor: pointer;
}
</style>
